window.onload = function () {
    const baseUrl = "http://172.19.1.251:8080/login"

    const btn1 = document.getElementById("btn1")

    btn1.addEventListener("click", (e) => {
        e.preventDefault()

        let usernameInput = document.getElementById("username").value
        let passwordInput = document.getElementById("password").value

        //用内置（原生）的 fetch 方式发送请求，提交表单
        fetch(baseUrl, {
            method: "GET"
        })
            .then((r) => {
                console.log("GET 请求成功")
                // 打印响应对象
                console.log(`登录用户名: ${usernameInput},密码: ${passwordInput}`)
                console.log("POST 请求响应对象:", r)
                console.log("\n")
                //打印响应内容的文本形式【后端 return 返回的要是文本，而不是其他的】
                //若返回 json 形式，则用 .json() 返回json格式解析数据
                return r.text() //text()可以获取真正返回数据，但此时是promise
            })
            .then((r) => {
                console.log(r) //打印上面return 返回的解析值
                return new Promise((resolve, reject) => {
                    resolve("演示继续.then()")
                })
            })
            .then((res) => {
                console.log(res)
            })
            .catch(() => {
                //请求失败执行函数
                console.log("GET 请求失败")
                console.log("\n")
            })
    })


    const btn2 = document.getElementById("btn2")
    btn2.addEventListener("click", (e) => {
        e.preventDefault()

        let usernameInput = document.getElementById("username").value
        let passwordInput = document.getElementById("password").value

        let data = {
            username: usernameInput,
            password: passwordInput
        }

        let dataJson = JSON.stringify(data)
        console.log("POST 请求对象的Json形式：", dataJson)

        fetch(baseUrl, {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: dataJson
        })
            .then((r) => {
                console.log("POST 请求成功")
                // 打印响应对象
                console.log("POST 请求响应对象:", r)
                console.log("\n")
            })
            .catch((error) => {
                console.log("POST 请求失败:", error)
                console.log("\n")
            })
    })

    

    //第三方 Axios ： 基于Promise的HTTP客户端，在浏览器和Node.js中都能使用
    // 查询网站：BootCDN

    const btn3 = document.getElementById("btn3")
    btn3.addEventListener("click",(e)=>{
        e.preventDefault()

        let usernameInput = document.getElementById("username").value
        let passwordInput = document.getElementById("password").value

        //发送get请求
        axios.get(baseUrl,{
            // get 请求的数据：
            //params 是 Axios 中用于‌拼接在 URL 上的查询参数‌
            params:{
                username:usernameInput,
                password:passwordInput
            }
        }) 

        //获取请求响应
        .then((res)=>{
            console.log("Axios GET 请求成功")
            console.log(res.data)
        })
        .catch((error) =>{
            console.log(error)
          })
    })

    const btn4 = document.getElementById("btn4")
    btn4.addEventListener("click",(e)=>{
        e.preventDefault()
        
        let usernameInput = document.getElementById("username").value
        let passwordInput = document.getElementById("password").value

        //发送 post 请求
        //会自动把对象转换成 json 格式的
        axios.post(baseUrl,{
            username:usernameInput,
            password:passwordInput
        })

        //获取请求响应
        .then((res)=>{
            console.log("Axios POST 请求成功")
            console.log(res.data)
        })
        .catch((error) =>{
            console.log(error)
          })
    })
}

